<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .form {
            width: 420px;

        }

        .form>div {
            width: 420px;
            position: relative;
        }

        .form>div input {
            width: 400px;
            padding-left: 20px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            outline: none;
            height: 40px;
            font-size: 20px;
        }

        .form>div span {
            position: absolute;
            top: 0;
            right: -210px;
            width: 220px;
            height: 40px;
            line-height: 40px;
        }

        .form>div input:focus {
            border: 2px solid deepskyblue;
        }
    </style>
</head>

<body>
    <div class="form">
        <div>
            <input type="text" placeholder="请输入QQ邮箱">
            <span style="display: none;">提示</span>
        </div>
    </div>

    <script>
        // 要求：
        // 验证QQ邮箱
        // 非 0 字符开头的正则
        // QQ数字 5位数
        // 字母   n位数
        // @qq.com
        // 10000@qq.com
        // _xiaoming@qq.com

        // 1. 定义正则表达式
        var regE01 = /[^0][0-9a-zA-F_]{4,11}@qq\.com$/;
        // console.log(regE01.test("10000@qq.com"));// true
        // console.log(regE01.test("_xiaoming@qq.com"));// true
        console.log(regE01.test("000001@qq.com"));// false

        // 2. 获取相关的标签
        var inp = document.querySelector(".form  input");
        var msg = document.querySelector(".form  span");

        // 3. 事件绑定
        // 监听输入框失去焦点
        inp.onblur = function () {
            // 获取输入框的值
            var v1 = this.value;
            // 判断输入框是否有值
            if (v1.length == 0) return;
            // 判断输入的文本是否符合格式
            if (regE01.test(v1)) {
                // 提示 
                msg.style["display"] = "block";
                msg.innerText = "是QQ邮箱";
            } else {
                // 提示 
                msg.style["display"] = "block";
                msg.innerText = "不是QQ邮箱";
            }
        }

        // 监听输入框获取焦点
        inp.onfocus = function () {
            // 重置输入框
            this.value = "";
            msg.style["display"] = "none";
            msg.innerText = "";
        }

        var regE03 = /[^0][0-9a-zA-F_]{4,11}@qq\.com$/;
        console.log(regE03.test("10000@qq.com"));// true
        console.log(regE03.test("_xiaoming@qq.com"));// true
        console.log(regE03.test("0xiaoxiao@qq.com"));// false

        
    </script>
</body>

</html>